<template>
	<div class="my">
		<div class="my_head" v-show="token==null">
			<aside>
				<h2>未登录
					<router-link to="/mobilelogin" style="color: blue;">
						请登录
					</router-link>
					<br /><br /><br />
				</h2>
			</aside>
		</div>
		<div class="my_head" v-show="token!=null">
			<router-link to="mobile/updateMine">
				<img class="myhead" :src="`http://127.0.0.1/api/public/showimg/${img}`" />
			</router-link>
			<aside>
				<h2>{{uname}}</h2>
				<p>身份：{{role}}</p>
			</aside>
			<aside>
				<router-link to="/mobilelogin">></router-link>
			</aside>
		</div>
		<!-- 
			<img :src="`http://127.0.0.1/api/public/showimg/${item.img}`">
			<aside>
				<h2>{{item.nickname}}</h2>
				<p>身份：{{item.role}}</p>
			</aside>
			<aside>
				<router-link to="/mobilelogin">></router-link>
			</aside>
		</div> -->
		<div class="my_head2" v-show="token!=null">
			<ul>
				<li>
					<router-link to="/"><i class="el-icon-goods"></i>
						<h3>我的订单</h3>
					</router-link>
				</li>
				<li>
					<router-link to="/mobile/cart"><i class="el-icon-shopping-cart-2"></i>
						<h3>我的购物车</h3>
					</router-link>
				</li>
				<li>
					<router-link to="/"><i class="el-icon-star-off"></i>
						<h3>我的收藏</h3>
					</router-link>
				</li>
			</ul>
		</div>
		<div class="my_head3">
			<div class="banner">
				<el-carousel :interval="5000" arrow="always" height='10rem'>
					<el-carousel-item v-for="item in HotBanner" :key="item.id">
						<img :src="item.pic">
					</el-carousel-item>
				</el-carousel>
			</div>
		</div>
	</div>

</template>

<script>
	import MoblieMine from '../../../view/mobile/MobileMine.vue'
	export default {
		name: 'MobileMy',
		props: ['proplist'],
		components: {
			MoblieMine
		},
		data() {
			return {
				list: [],
				token: window.localStorage.getItem('token'),
				uname: window.localStorage.getItem('name'),
				role: window.localStorage.getItem('role'),
				img: window.localStorage.getItem('img'),
				bannerlist: [{
						pic: require('@/assets/img/banner.png')
					},
					{
						pic: require('@/assets/img/mobile/movie2.png')
					},
					{
						pic: require('@/assets/img/mobile/movie3.png')
					},
				]

			}
		},
		// 监听器
		watch: {
			// 如果数据时请求获取，基本上都需要监听props的数据，确保获取到数据后在进行循环等操作
			proplist() {
				this.list = this.proplist;
			}
		},
		computed: {
			HotBanner() {
				let arr = [];
				this.bannerlist.forEach((item, i) => {
					if (i < 4) {
						arr.push(item)
					}
				})
				return arr;
			}
		}
	}
</script>

<style scoped>
	.my {
		background-color: rgba(72, 72, 72, 0.5);
		text-align: center;
		color: white;
		border: #9f8f76 2px solid;
	}

	.my .my_head {
		display: flex;
		margin-top: 1.5rem;
		justify-content: space-around;
	}

	.my .my_head aside {
		line-height: 3rem;
		margin-bottom: -2rem;
	}

	.my a {
		line-height: 5rem;
		text-decoration: none;
		color: white;
	}

	.my .my_head img {
		height: 5rem;
		width: 5rem;
		border-radius: 50%;
	}

	.my .my_head2 i {
		font-size: 2rem;
		margin-top: 2rem;
	}

	.my .my_head2 h3 {
		margin-top: -3rem;
	}

	.my .my_head2 ul {
		margin-left: 1rem;
		width: 90%;
		display: flex;
		justify-content: space-between;
		list-style: none;
	}

	.my .my_head3 {
		list-style: none;
	}

	.my .my_head3 img {
		width: 100%;
		height: 100%;
	}
</style>